<template>

    <el-dropdown @command="clickCommand" trigger="click" size="large">
        <span class="block">
            <el-avatar :size="30" :src="user.avatarUrl" />
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item :icon="UserFilled" :command="0">个人信息</el-dropdown-item>
                <el-dropdown-item :icon="Unlock" :command="1" divided>密码修改</el-dropdown-item>
                <el-dropdown-item :icon="Right" :command="2" divided> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts" setup>
import { UserFilled, Unlock, Right } from '@element-plus/icons-vue'//引入图标
import { useRouter } from "vue-router"//引入路由
import { useUsertore } from '@/stores/user'//引入状态

const router = useRouter()//使用路由这个方法
const store = useUsertore()//使用状态这个方法
const user = store.user//赋值

//点击头像显示个人信息
const clickCommand = (e: number) => {
    switch (e) {
        case 0:
            router.push('/index/userinfo') //跳转个人信息路由
            break;
        case 1:
            router.push('/index/changepassword') //跳转密码修改路由
            break;
        case 2:
        store.logout() //调用状态中退出登录的函数执行
            break;
    }
}
</script>

<style lang="less" scoped>
.block {
    margin-top: 11px;
}
</style>